import React, { useMemo, useState } from 'react';
import './index.less';
import { useKeyPress } from 'ahooks';
import { Tooltip } from 'antd';
import {
  StyledTableCell, StyledTableCellSelected,
  StyledTableHead, StyledTableHeadSelected, StyledTableIndex,
  StyledTablePicker,
  StyledTablePickerBox
} from './style';

export const WIDTH_SIZE = 25;
export const HEIGHT_SIZE = 17;
export const MIN_ROW = 4;
export const MIN_COL = 4;
export const MAX_ROW = 15;
export const MAX_COL = 20;

export type TableArg = {
  rows?: number;
  cols?: number;
  withHeaderRow?: boolean;
}

const TablePicker: React.FC<{
  onSet: (arg: TableArg) => void;
  disabled?: boolean;
}> = ({ onSet }) => {
  const [tableRows, setTableRows] = useState<number>(MIN_ROW);
  const [tableCols, setTableCols] = useState<number>(MIN_COL);
  const [selectRows, setSelectRows] = useState<number>(0);
  const [selectCols, setSelectCols] = useState<number>(0);
  const [withHeaderRow, setWithHeaderRow] = useState<boolean>(true);

  useKeyPress('shift', () => {
    if (withHeaderRow) {
      setWithHeaderRow(false);
    }
  }, {
    events: ['keydown'],
    exactMatch: true,
  },);

  useKeyPress('shift', () => {
    setWithHeaderRow(true);
  }, {
    events: ['keyup'],
  },);
  const selectCell = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    const [rows, cols] = getTablePosition(e);
    alert(rows+','+cols+','+withHeaderRow);
    onSet?.({
      rows,
      cols,
      withHeaderRow,
    });
  };

  const moveCell = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    const [x, y] = getTablePosition(e);
    setSelectRows(x);
    setSelectCols(y);
    setTableRows(x + 1);
    setTableCols(y + 1);
  };

  //获取鼠标点击区域在Html绝对位置坐标
  function getTablePosition(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
    const x = e.nativeEvent.offsetX || 0;
    const y = e.nativeEvent.offsetY || 0;
    const _rows = Math.ceil(x / WIDTH_SIZE);
    const _cols = Math.ceil(y / HEIGHT_SIZE);
    return [_rows, _cols];
  }


  const getWidth = (_rows: number) => {
    if (_rows < 0) {
      _rows = 0;
    }
    return _rows * WIDTH_SIZE;
  };

  const getHeight = (_cols: number) => {
    if (_cols < 0) {
      _cols = 0;
    }
    return _cols * HEIGHT_SIZE;
  };


  const content = useMemo(
    () => (
      <Tooltip className={'table-picker-container'} placement={'bottom'} title={'按住shift奔跑'} overlayStyle={{visibility:withHeaderRow?'visible':'hidden'}}>
        <StyledTablePickerBox style={{
          width: getWidth(tableRows), height: getHeight(tableCols) + 20,
        }}>
          <StyledTablePicker>
            <StyledTableCell style={{
              width: getWidth(tableRows),
              height: getHeight(tableCols),
            }} onMouseMove={moveCell}/>
            <StyledTableHead style={{
              width: getWidth(tableRows)
            }}  hidden={!withHeaderRow} onMouseMove={moveCell}/>
            <StyledTableCellSelected style={{
              width: getWidth(selectRows),
              height: getHeight(selectCols)
            }} onMouseMove={moveCell} onClick={selectCell}/>
            <StyledTableHeadSelected/>
          </StyledTablePicker>
          <StyledTableIndex>{selectRows} x {selectCols}</StyledTableIndex>
        </StyledTablePickerBox>
      </Tooltip>
    ),
    [selectCols, selectRows, withHeaderRow],
  );


  // const content2 = useMemo(() => (
  //   <Tooltip className={'table-picker-container'} placement={'bottom'} title={'songsong'} defaultOpen={false}>
  //     <div className="table-picker-box" style={{
  //       width: getWidth(tableRows), height: getHeight(tableCols) + 20, minWidth: getWidth(MIN_ROW),
  //       minHeight: getHeight(MIN_COL) + 20,
  //     }}>
  //       <div className="table-picker-background">
  //         <div className="table-picker picker-cell" style={{
  //           minWidth: getWidth(MIN_ROW),
  //           minHeight: getHeight(MIN_COL),
  //           width: getWidth(tableRows),
  //           height: getHeight(tableCols),
  //           maxWidth: getWidth(MAX_ROW),
  //           maxHeight: getHeight(MAX_COL)
  //         }} onMouseMove={moveCell}/>
  //         <div className="table-picker picker-head heading"
  //              style={{ width: getWidth(tableRows), height: getHeight(1), minWidth: getWidth(MIN_ROW), }}
  //              hidden={!withHeaderRow} onMouseMove={moveCell}/>
  //         <div className="table-picker picker-selected-cell" style={{
  //           width: getWidth(selectRows),
  //           height: getHeight(selectCols)
  //         }} onMouseMove={moveCell} onClick={selectCell}/>
  //         <div className="table-picker picker-selected-heading heading" style={{ width: 0, height: 0 }}/>
  //       </div>
  //       <p className="table-picker-index">{selectRows} x {selectCols}</p>
  //     </div>
  //   </Tooltip>
  // ), [selectCols, selectRows, withHeaderRow]);


  return (
    <div>
      {content}
    </div>
  );
};
export default TablePicker;